<template>
    <div class="welcome2">
        <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight" style="border:1px solid #d3d3d3;">
            您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
    </div>
</template>

<script>
    import {transformCoordinatePoint} from "@/api/utils";

    export default {
        name: "welcome2",
        data(){
          return{
              ctx:null,//myCanvas对象
              canvasWidth:800,//myCanvas宽
              canvasHeight:800,//myCanvas高
              visual: {
                  x: 0,
                  y: 0,
                  z: 300
              },//观测点坐标
              pointMap: {
                  A: [-50, 50, 50],
                  B: [-50, 50, -50],
                  C: [50, 50, -50],
                  D: [50, 50, 50],
                  E: [-50, -50, 50],
                  F: [-50, -50, -50],
                  G: [50, -50, -50],
                  H: [50, -50, 50]
              },//测试正方体
              startPoint:{
                  'x':0,
                  'y':0
              },
              movePoint:{
                  'x':0,
                  'y':0
              }
          }
        },
        methods:{
            init(){
                this.ctx = document.getElementById("myCanvas").getContext("2d");
                let _this = this;
                const windowToCanvas = (canvas, x, y) => {
                    //获取canvas元素距离窗口的一些属性，MDN上有解释
                    let rect = canvas.getBoundingClientRect();
                    //x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
                    return {
                        x: x - rect.left * (canvas.width/rect.width),
                        y: y - rect.top * (canvas.height/rect.height)
                    }
                };
                let isAllowDrawLine = false;
                myCanvas.onmousedown = function(e) {
                    //获得鼠标按下的点相对canvas的坐标。
                    isAllowDrawLine = true;
                    //es6的解构赋值
                    //let { x , y } = ele;
                    _this.startPoint = windowToCanvas(myCanvas, e.clientX, e.clientY);
                    //绘制起点。
                    //context.moveTo(x, y)
                    myCanvas.onmousemove = (e) => {
                        if (isAllowDrawLine) {
                            //移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
                            let ele = windowToCanvas(myCanvas, e.clientX, e.clientY);
                            _this.movePoint = ele;
                            _this.animationFrame();
                            _this.startPoint = ele;
                            // context.lineTo(x, y);
                            //context.stroke()
                        }
                    }
                };
                myCanvas.onmouseup = function() {
                    isAllowDrawLine = false
                };
                this.draw();
            },
            animationFrame() {
                var moveX = this.movePoint.x - this.startPoint.x;
                var moveY = this.movePoint.y - this.startPoint.y;
                //let rotationAngle = 1;
                window.requestAnimationFrame(() => {
                    //控制绕y轴旋转
                    for (let key in this.pointMap) {
                        let point = this.pointMap[key];
                        // 保存x,y,z坐标
                        let x = point[0];
                        let y = point[1];
                        let z = point[2];
                        // 变换后的x坐标
                        point[0] = x * Math.cos(moveX / 180 * Math.PI) + z * Math.sin(moveX / 180 * Math.PI);
                        // 绕y轴旋转，y坐标不会发生变化
                        point[1] = y;
                        // 变换后的z坐标
                        point[2] = z * Math.cos(moveX / 180 * Math.PI) - x * Math.sin(moveX / 180 * Math.PI);

                    }
                    //控制绕x轴旋转
                    for (let key in this.pointMap) {
                        let point = this.pointMap[key];
                        // 保存x,y,z坐标
                        let x = point[0];
                        let y = point[1];
                        let z = point[2];
                        // 绕x轴旋转，x坐标不会发生变化
                        point[0] = x;
                        // 变换后的y坐标
                        point[1] = y * Math.cos(moveY / 180 * Math.PI) + z * Math.sin(moveY / 180 * Math.PI);
                        // 变换后的z坐标
                        point[2] = z * Math.cos(moveY / 180 * Math.PI) - y * Math.sin(moveY / 180 * Math.PI)
                    }
                    this.draw();
                    //this.animationFrame()
                })
            },
            draw(){
                let point;
                this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
                // 绘制矩形ABCD
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.A,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.B,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.C,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.D,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.closePath();
                this.ctx.stroke();
                // 绘制矩形EFGH
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.E,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.F,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.G,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.H,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.closePath();
                this.ctx.stroke();
                // 绘制直线AE
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.A,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.E,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.stroke();
                // 绘制直线BF
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.B,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.F,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.stroke();
                // 绘制直线CG
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.C,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.G,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.stroke();
                // 绘制直线DH
                this.ctx.beginPath();
                point = transformCoordinatePoint(...this.pointMap.D,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.moveTo(point.x, point.y);
                point = transformCoordinatePoint(...this.pointMap.H,this.visual,this.canvasWidth/2,this.canvasHeight/2);
                this.ctx.lineTo(point.x, point.y);
                this.ctx.stroke();
            }
        },
        mounted(){
            this.init();
            //this.animationFrame();
        }
    }
</script>

<style scoped>

</style>
